<template>
  <view class="every-day">
    <uni-card padding="20rpx 0" :thumbnail="avatar">
      <view class="news">NEWS</view>
      <van-divider dashed />
      <!-- 新闻头部 -->
      <view class="news-title">
        <view class="news-title-left">
          {{ time[1] }}
        </view>
        <view class="news-title-content">
          {{ title }}
        </view>
        <view class="news-title-right">
          {{ year }}年{{ time[0] }} {{ time[2] }}
        </view>
      </view>
      <van-divider dashed />
      <!-- 新闻内容 -->
      <view class="news-content">
        <view
          v-for="(item, index) in contentList"
          :key="index"
          class="news-content-text"
        >
          <!-- 最后一项不加序号 -->
          {{ `${item.indexOf('【微语】') !== -1 ? '' : index + 1 + '、'} ` }}
          {{ item }}
        </view>
        <view style="text-align: center">
          <!-- 图片链接 -->
          <uni-link :href="link" showUnderLine="false" color="red"
            >点击查看图片</uni-link
          >
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
export default {
  name: 'Every-Day',
  mixins: [mixin],
  data() {
    return {
      link: '', // 图片链接
      contentList: [], // 内容列表
      year: new Date().getFullYear(),
      time: [], // 时间
      title: '' // 文章标题
    }
  },
  created() {
    this.getPicLink()
  },
  methods: {
    async getPicLink() {
      const res = await this.$http.get('/60s?type=json')
      if (res.success) {
        this.link = res.imgUrl
        this.time = res.time
        this.contentList = res.data
        this.title = res.name
      } else {
        this.$msg('获取列表失败')
      }
      // console.log(res)
    },

  }
}
</script>

<style lang="scss" scoped>
.every-day {
  .news {
    color: red;
    font-style: oblique;
  }
  .news-title {
    display: flex;
    justify-content: space-between;
    height: 120rpx;
    &-left {
      width: 70rpx;
      font-size: 24rpx;
    }
    &-content {
      color: red;
      font-size: 50rpx;
      line-height: 120rpx;
    }
    &-right {
      width: 90rpx;
      font-size: 24rpx;
    }
  }
  .news-content {
    &-text {
      margin: 16rpx;
    }
  }
}
</style>
